import React, { useEffect } from 'react'
import { useRouter } from 'next/dist/client/router';
import { Button, Space } from "antd"
import Link from 'next/link';
const Liveing = () => {
    let router = useRouter()
    // console.log(router.query.id,"live id")
    let [item, setItem] = React.useState({} as any)
    useEffect(() => {
        if (router.query.id) {
            setItem(JSON.parse(router.query.obj as string || '{}'))
        }
    }, [router.query.id])
    return (
        <div style={{
            width: "100vw",
            height: "100vh",
            background: "#666"
            // background:"url(https://img2.baidu.com/it/u=3353131208,1680816121&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800) no-repeat",
            // backgroundSize:"100% 100%",
        }}>
            {JSON.stringify(item) != "{}" &&
                <div>
                    <h2 style={{ color: "#fff", background: "#aaa", padding: "10px 20px", borderBottom: "4px solid #ccc" }}>{item.name} 直播间
                        <span style={{ paddingLeft: "500px" }}>{item.title}</span>
                    </h2>
                    <div style={{
                        width: "100%",
                        height: "calc(100vh - 60px)",
                        display: "flex"
                    }}>
                        <div style={{
                            width: "260px"
                            , height: "100%"
                            , display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                            lineHeight: "40px",
                            color: "aqua",
                            paddingTop: "50px",
                            // border:"solid 1px #ccc"
                        }}>
                            <div>当前观看人数：{item.lookcount}</div>
                            <div>当前关注人数：{item.attentioncount}</div>
                            <div>当前点赞人数：{item.likecount}</div>
                            <div>当前下单人数：{item.buycount}</div>
                        </div>
                        <div style={{
                            flex: "1"
                            // ,background:"red"
                        }}>
                            {/* <img src={item.url}
                                style={{
                                    width: "100%",
                                    height: "70%",
                                    display: "block"
                                }}
                                alt="" /> */}

                                <iframe style={{
                                    width: "70%",
                                    height: "70%",
                                    display: "block"
                                }} src='https://www.huya.com/?ADTAG=search-zd'> </iframe>
                            <div style={{
                                width: "100%",
                                height: "50px",
                                display: "flex",
                                justifyContent: "center",
                                alignItems: "center"
                            }}>
                                <Space>
                                    <Button>
                                        <Link href="/live">返回</Link>
                                    </Button>
                                    <Button style={{
                                        background: "red",
                                        color: "#fff"
                                    }} danger
                                        onClick={() => {
                                            //强制关闭本页面
                                            window.opener = null;
                                            window.open('', '_self');
                                            window.close();
                                        }}
                                    >强制关闭</Button>
                                </Space>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    )
}

export default Liveing